<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./static/vue.js"></script>
		<script src="./static/axios.js"></script>
		<script src="./static/show-toast.js"></script>
		<script src="./static/md5.min.js"></script>
		<!-- <link rel="stylesheet" href="./index.min.css"> -->
		<style>
			/* html{font-size:48px} */
			html,body,#pay{background-color:#F6F6F6;height:100vh;width:100vw}html,body,p{margin:0;padding:0}[v-cloak]{display:none}#pay{padding:0 1.25rem;box-sizing:border-box;display:flex;flex-direction:column}#pay>.title{height:3rem;flex-shrink:0}#pay>.title img{width:0.5rem}#pay>.title>p{transform:translateX(-0.5rem)}#pay>.paybtn{flex-shrink:0;margin:1rem 0;width:100%}#pay .pagemain{height:0;flex:1;overflow-y:scroll}#pay .pagemain>.pay-methods>div:not(:nth-last-child(1)){position:relative;margin-bottom:0.05rem}#pay .pagemain>.pay-methods>div:not(:nth-last-child(1))::after{content:"";height:0.05rem;background-color:#222222;position:absolute;width:calc(100% - 3.25rem);right:0;bottom:0;opacity:0.05}#pay .pagemain>.money{padding:1.5rem 0}#pay .pagemain>.money p:nth-child(1){color:#FF9100}#pay .icon-i{height:1.5rem;width:1.5rem}#pay .icon-select{height:1rem;width:1rem}.we-btn{border-radius:1.25rem;height:2.625rem;color:white;background-color:#FFAD36;border:none;outline:none;width:100%;font-size:1rem}.we-btn.dis{background-color:#C8C8C8}.flex{display:flex}.flex-cx{justify-content:center}.flex-cy{align-items:center}.flex-ey{align-items:flex-end}.font-bold{font-weight:700}.m-auto{margin:auto auto}.mx-auto{margin-left:auto;margin-right:auto}.mx-3{margin-left:0.75rem;margin-right:0.75rem}.mb-1{margin-bottom:0.25rem}.mb-3{margin-bottom:0.75rem}.ml-auto{margin-left:auto}.ml-2{margin-left:0.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.p-2{padding:0.5rem}.p-4{padding:1rem}.text-s-big{font-size:2rem}.text-l-big{font-size:1.5rem}.text-big{font-size:1.125rem}.text-base{font-size:1rem}.text-small{font-size:0.875rem}.text-mini{font-size:0.75rem}.text-s-mini{font-size:0.5rem}.text-center{text-align:center}.color-2{color:#222}.color-3{color:#333}.color-red{color:#FF5656}.color-yellow{color:#FF9100}.op-3{opacity:0.3}.op-4{opacity:0.4}.op-5{opacity:0.5}.op-6{opacity:0.6}.bg-white{background-color:#FFF}.rounded-3{border-radius:0.75rem}.modal{z-index:1000;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:calc(100% - 2.5rem);background:#FFF;border-radius:0.75rem}.modal-bg{z-index:999;position:absolute;top:0;bottom:0;right:0;left:0;background:rgba(34,34,34,0.6)}.coupon-modal{display:flex;flex-direction:column;padding:1.25rem;box-sizing:border-box;background-color:#F6F6F6;height:80vh}.coupon-modal>.content{height:0;flex:1;overflow-y:scroll}.coupon-modal>.we-btn{margin-top:1.25rem;flex-shrink:0}.paypass-modal input[type='password']{height:2.5rem;background:#FFF;border-radius:6px;border:1px solid rgba(34,34,34,0.1);width:100%;padding:0.75rem;box-sizing:border-box;margin:0.5rem 0 2rem 0;letter-spacing:0.2em;font-size:1rem}.paypass-modal input[type='password']::placeholder{color:#222222;opacity:0.4;font-size:0.75rem !important}.border-b{position:relative}.border-b ::after{content:"";height:0.0125rem;background-color:#222222;position:absolute;width:100%;right:0;bottom:0;opacity:0.05}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}
		</style>
	</head>
	<body>
		<div id="pay" class="pay">
			<div class="title flex flex-cy">
				<img 
					@click="close"
					src="./static/image/return.png" alt="">
				<p class=" mx-auto font-bold text-base">支付</p>
			</div>
			
			<div class="pagemain">
				<div class="money">
					<p class=" flex flex-cx flex-ey font-bold">
						<span class=" text-base">{{[2].includes(paymentModeCur)?'G':'￥'}}</span>
						<span v-cloak class=" text-s-big">{{[2].includes(paymentModeCur)? payData.total_fee:payinfo.should_money}}</span>
					</p>
					<p class=" flex flex-cx text-mini color-2 op-5" v-cloak>商品：{{gameData.name || '游戏'}}充值服务</p>
				</div>
				<p class=" color-2 op-6 font-small mb-3">支付方式</p>
	
				<div class=" pay-methods rounded-3 bg-white mb-3">
					<div v-for="item in [
							{img:'i-wx',txt:'微信支付',value:0},
							{img:'i-zfb',txt:'支付宝支付',value:1},
							{img:'i-ym',txt:'游米支付',value:2}
						]"
						@click="paymentModeCur=item.value"
						class=" flex flex-cy p-4"
					>
						<img class="icon-i" :src="`./static/image/${item.img}.png`" :alt="item.txt">
						<span class=" ml-2 text-small color-2">{{item.txt}}</span>
	
						<img class=" ml-auto icon-select" 
							:src="`./static/image/select${paymentModeCur==item.value?'':'-no'}.png`"
						>
					</div>
				</div>
				<div class=" rounded-3 bg-white mb-3">
					<div class=" flex flex-cy p-4">
						<template v-if="[0,1].includes(paymentModeCur)">
							<img class="icon-i" :src="`./static/image/i-coupon.png`" >
							<span class=" ml-2 text-small color-2">优惠券</span>
							<span
								@click="modalShow='coupon'"
								class=" ml-auto text-mini flex flex-cy">
								<span v-if="payinfo.select" class=" color-red">-{{payinfo.sub_money}}¥</span>
								<span v-else class=" color-2 op-4">{{canUseCouponList.length?`${canUseCouponList.length}张可用`:'无可用优惠券'}}</span>
								<img class=" text-big ml-2 op-4" 
									style="transform: rotate(180deg);"
									src="./static/image/return.png" alt="">
							</span>
						</template>
						<template v-else-if="[2].includes(paymentModeCur)">
							<img class="icon-i" :src="`./static/image/ym.png`" >

							<template v-if="ymdesc.isSetPayPwd">
								<span class=" ml-2 text-small color-2 flex flex-cy">余额：
									<span class="color-red" v-cloak>{{ymdesc.totalYouMi}}</span>
								</span>
								<span class=" ml-auto text-mini flex flex-cy" @click="payym">
									<span class=" color-2 op-4">充值</span>
									<img class=" text-big ml-2 op-4" 
										style="transform: rotate(180deg);"
										src="./static/image/return.png" alt="">
								</span>
							</template>
							<template v-else>
								<span class=" text-mini ml-2 color-2 flex flex-cy" @click="toMine">
									<span>点击开启游米支付，</span>
									<span class="color-red">多充多送</span>
								</span>
							</template>
						</template>
					</div>
				</div>
			</div>
			<button 
				@click="payment"
				:class="{'dis':([2].includes(paymentModeCur) && !ymdesc.isSetPayPwd)}"
				class=" we-btn paybtn">确认支付</button>
			<transition name="fade" mode="out-in" >
				<div class="modal-bg" 
					@click="modalShow=false"
					v-show="modalShow"></div>
			</transition>
			<transition name="fade" mode="out-in" >
				<div 
					v-if="modalShow=='paypass'"
					class="modal paypass-modal p-4" style="box-sizing:border-box;">
					<p class=" color-2 mb-3 text-small" style="font-family: Source Han Sans CN-Medium, Source Han Sans CN;">请输入支付密码</p>
					<p class=" color-yellow font-bold text-center">
						<span>G</span><span class=" text-s-big">{{payData.total_fee}}</span>
					</p>
					<input v-model="paypass" class=" mb-3" type="password" placeholder="点击输入密码">
					<button @click="payym" class=" we-btn">确认支付</button>
				</div>
			</transition>
			<transition name="fade" mode="out-in" >
				<div class="modal coupon-modal" v-show="modalShow=='coupon'">
					<div class="content">
						<p class=" color-2 mb-3">
							<span class=" text-small">当前游戏可用</span>
							<span class=" op-5 text-mini" v-cloak>{{2}}张</span>
						</p>
						<coupon-item
							v-for="item in canUseCouponList"
							:key="item.id"
							:cansue="true"
							:select_id="uselect_coupon.id"
							:couponinfo="item"
							@choose="uselect_coupon = item"
						></coupon-item>
						<p class=" color-2 mb-3">
							<span class=" text-small">当前游戏不可用</span>
							<span class=" op-5 text-mini" v-cloak>{{2}}张</span>
						</p>
						<coupon-item
							v-for="item in canNotUseCouponList"
							:key="item.id"
							:couponinfo="item"
						></coupon-item>
					</div>
					<button @click="modalShow=false" class=" we-btn paybtn">确认</button>
				</div>
			</transition>
			
		</div>
	</body>
	<script>
		//*utils
		Date.prototype.format = function(fmt='yyyy.MM.dd hh:mm') {
			let o = {
				"y+": this.getFullYear(), //年份
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"h+": this.getHours(), //小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
			};
			if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (let k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (
					("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		}

		const postToken = (()=>{
			try{
				return {
					sessionToken: sdk.getSessionToken(),
					userOpenId: sdk.getUserOpenId()
				}
			}catch(e){
				return {
					sessionToken: "1M751RIQB79353041865F7E58158C508F5803943DEA949E963D6E8561874B75D2FF43B34",
					userOpenId: "Y9d6ZddhNlcGM3r3tI+7Zw=="
				}
			}
		})()
		
		//*conf
		const BASE_URL = 'http://web.gamersky.com/GameUnionOperationPlatform/'
		axios.defaults.baseURL = BASE_URL
		axios.interceptors.request.use(
			request => {
				const { data } = request
				request.data = Object.assign({}, data, postToken)
				console.log(request.url + "=>>" + JSON.stringify(request.data))
				return request
			},
			err => {
				ElMessage.error('无法发送请求')
				return Promise.reject(err.data)
			}
		)

		axios.interceptors.response.use((response) => {
			const { data,data: {error,errorDescription} } = response
			if (error) {
				showToast(errorDescription)
				return Promise.reject(error)
			} else {
				delete data.error
				if(data.errorDescription)
					data.info = data.errorDescription
				delete data.errorDescription
				return Promise.resolve(data)
			}
			return response
		}, (error) => {
			return Promise.reject(error)
		})
	</script>

	<script>
		Vue.component('coupon-item',{
			computed:{
				info(){
					const { couponMoney,couponCategory,useStatus,timeleft } = this.couponinfo
					if(useStatus == 2)
						return { num:timeleft, unit:'S' }
					else if(couponCategory == 1)
						return { num:couponMoney, unit:'¥' }
					else if(couponCategory == 2)
						return { num:couponMoney, unit:'折' }
				}
			},
			props:['couponinfo','cansue','select_id'],
			template:`
			<div 
				class="coupon color-2 px-2 rounded-3 mb-3 bg-white"
				style="box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.06);"
			>
				<div class=" border-b p-2 flex flex-cy" :class="{'op-3':!cansue}">
					<div>
						<p class=" mb-1 text-mini font-bold">{{couponinfo.name}}</p>
						<p class=" op-5 text-s-mini">{{new Date(couponinfo.effectiveTime).format()}}</p>
					</div>
					<p class=" color-yellow ml-auto">
						<span class="text-l-big">{{info.num}}</span>
						<span class="text-s-mini">{{info.unit}}</span>
					</P>
				</div>
				<p class=" p-2 flex flex-cy" :class="{'op-3':!cansue}">
					<span class=" text-s-mini op-5">满{{couponinfo.serviceConditionsMoney}}元可用，单次可用一张</span>
					<img 
						class=" ml-auto icon-select"
						@click="$emit('choose')"
						:src="'./static/image/select'+(select_id==couponinfo.id?'':'-no')+'.png'"
					>
				</p>
			</div>`
		})

		/** 
		* make: keke
		* date: 2022-09-28
		*/
		const vm=new Vue({'el':'#pay','data':{'gameData':{},'ymdesc':{},'modalShow':![],'payData':{},'paymentModeCur':0x0,'canUseCouponList':[],'canNotUseCouponList':[],'uselect_coupon':{},'paypass':'','couponinter':null},async 'mounted'(){const {appId:_0x46b004,appId:_0x399bed,orderId:_0xb8818c,extra:_0xeb92e6,serverId:_0x5d9e2b,price:_0x513e17,sign:_0x2c164e,userId:_0x53c38c,roleId:_0x27d398}=((()=>{try{return JSON['parse'](sdk['payOrderJson']());}catch(_0xef595c){return{'appId':'shouyouceshi','extra':'附加参数','orderId':'71841123111231','price':0xa,'produceName':'商品信息','roleId':'1123','roleName':'角色名称','serverId':'1','sign':'10ed17dce3dee486304d766daa4d243b','userId':'5371313'};}})());const {gameData:_0x1993be}=await axios['get']('/GamerSkySDK/GetGameByAppId',{'params':{'appId':_0x46b004}});this['gameData']=_0x1993be;this['payData']={'app_id':_0x399bed,'server_id':_0x5d9e2b,'total_fee':_0x513e17,'sign':_0x2c164e,'user_id':_0x53c38c,'gameaccount':_0x27d398,'ext':_0xeb92e6,'bill_no':_0xb8818c};this['GET_YM_INFO']();this['GetCouponByGameId']();},'methods':{'toMine'(_0x37b0b1){sdk['jump2YouMiPwd']('游米支付');},'payym'(){sdk['jump2BuyYouMi']('购买游米');},async 'GET_YM_INFO'(){const {totalYouMi:_0x27097e,error:_0x3c2714}=await axios['post']('/YouMi/GetYouMi');const {error:_0x4bad16,isSetPayPwd:_0x45af0d}=await axios['post']('/YouMiPaySecondPwds/IsSetPayPwd');this['ymdesc']={'totalYouMi':_0x27097e,'isSetPayPwd':_0x45af0d};},async 'payym'(){const {totalYouMi:_0x23fb91,isSetPayPwd:_0x2b34b7}=this['ymdesc'];if(!_0x2b34b7){showToast('请先设置支付密码');throw new Error();}const {gameData:{id:_0x6f69a5,name:_0x52b671},paypass:_0x1fcf3a,payData:{server_id:_0x19fb58,total_fee:_0x992bbc,ext:_0x4fef8f,bill_no:_0x47a199,server_id:_0x47693f}}=this;if(!_0x1fcf3a){showToast('请输入支付密码');throw new Error();}const _0x466a1e=md5(_0x1fcf3a);const {error:_0x5979f9,info:_0x19f075,serialNumber:_0x4fe8cc}=await axios['post']('YouMiOrders/CreateYouMiOrder',Object['assign']({'YouMiOrderPrice':Number(_0x992bbc)*-(0x9b9d6^0x9b9d7),'Reason':_0x52b671+'-'+_0x19fb58+'-游戏充值服务（游米支付）','GameId':_0x6f69a5,'ServerID':_0x19fb58,'PayMethod':0x4,'Side':'pc','SideDevice':'pc','YouMiSecondPwd':_0x466a1e,'ext':_0x4fef8f,'GameCompanyOrder':_0x47a199,'GameCompanyServerId':_0x47693f}));const {errorDescription:_0x47cc05}=await axios['post']('YouMiOrders/PayYouMiOrder',{'serialNumber':_0x4fe8cc});},async 'payment'(){if(this['paymentModeCur']==(0x5c8ff^0x5c8fd)){return this['modalShow']='paypass';}else{const {serialNumber:_0xd52f8b}=await axios['post']('Orders/GameH5Pay',{...this['payData'],'payMethod':this['paymentModeCur']==(0x2cc4f^0x2cc4f)?'微信支付':'支付宝支付','PayTools':'电脑','PayPlatform':0x2,'CouponId':this['uselect_coupon']['id']||0x9929c^0x9929c});const _0x359c04={'serialNumber':_0xd52f8b,'device':'Android','rmb':this['payData']['total_fee'],'payType':'officialPay','payChannel':this['paymentModeCur']==(0x1c280^0x1c280)?'wechat':'alipay','side':'wap'};const {payURL:_0x3d21b7}=await axios['post']('PayOrder/H5PayOrder',_0x359c04);if(this['paymentModeCur']==(0xb48db^0xb48db))window['open'](_0x3d21b7);else if(this['paymentModeCur']==(0x3017c^0x3017d)){let _0x38e2d4=document['createElement']('iframe');_0x38e2d4['src']=_0x3d21b7;document['body']['appendChild'](_0x38e2d4);setTimeout(function(){_0x38e2d4['remove']();},0x65446^0x65ffe);}this['close'](_0xd52f8b);}},async 'GetCouponByGameId'(){const {canUseCouponList:_0x227335,canNotUseCouponList:_0x431df9}=await axios['post']('Coupons/GetCouponByGameId',{'gameId':this['gameData']['id'],'orderPrice':this['payData']['total_fee']});this['canUseCouponList']=_0x227335;if(this['couponinter'])clearInterval(this['couponinter']);if(_0x431df9['filter'](_0x4b71d9=>_0x4b71d9['useStatus']==(0xe7371^0xe7373))['length'])this['couponinter']=setInterval(()=>{this['canNotUseCouponList']=_0x431df9['map'](_0x55c16a=>{if(_0x55c16a['useStatus']!=(0x8d65d^0x8d65f))return _0x55c16a;if(_0x55c16a['timeleft']===(0x21ab3^0x21ab3)){clearInterval(this['couponinter']);this['GetCouponByGameId']();}else{_0x55c16a['timeleft']=_0x55c16a['timeleft']===undefined?(0x787e5^0x786c9)-parseInt((new Date()-new Date(_0x55c16a['useTime']))/0x3e8):_0x55c16a['timeleft']-0x1;}return _0x55c16a;});},0xc634c^0xc60a4);else this['canNotUseCouponList']=_0x431df9;this['uselect_coupon']=_0x227335[0x0]||{};},'close'(_0x208470){if(_0x208470)sdk['finish'](_0x208470);else sdk['finish']();}},'computed':{'payinfo'(){const {uselect_coupon:_0x2ae94f,payData:{total_fee:_0x2d3565}}=this;if(!_0x2ae94f['id'])return{'select':![],'should_money':_0x2d3565};const {couponCategory:_0x2e6134,serviceConditionsMoney:_0x208440,couponMoney:_0x3ae1ac}=_0x2ae94f;console['log']({'uselect_coupon':_0x2ae94f});let _0x244a5e=_0x2e6134==0x2?_0x2d3565*(_0x3ae1ac*0x64)/(0xca005^0xca3ed):_0x2d3565-_0x3ae1ac;_0x244a5e=(_0x244a5e||0x2c16d^0x2c16d)['toFixed'](0x2);const _0x4b8ad1=(_0x2d3565-Number(_0x244a5e))['toFixed'](0x9d0e1^0x9d0e3);return{'select':!![],'sub_money':_0x4b8ad1,'should_money':_0x244a5e};}}});
		
	</script>

	<script src="./static/mobilePay.js"></script>
</html>
